<template>
<!--  Icon 列表 -->
  <div class="wrapper">
    <router-link tag="div" to="/Secondary/" class="item" v-for="item of list" :key="item.id">
      <div class="item-img">
        <img class="img" :src="item.imgUrl">
      </div>
      <p class="item-title">{{item.desc}}</p>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'IconLieBiao',
    // 接收json 数据
    props:{
      list: Array
    },
    data () {
      return {}
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    background #f8f7f7
    display flex
    flex-wrap wrap
    justify-content space-around
    align-items center
    box-sizing border-box
    padding .3rem .1rem


  .item
    width 20%
    display flex
    flex-direction column
    align-items center
    padding-bottom .2rem

  .item-img
    width 50%

  .img
    width 100%

  .item-title
    color #333
    margin-top .1rem

</style>
